<template>
	<view class="content">
		<view class="ruler-content">
			<view class="one-ruler">
				<view class="title">實時計價</view>
				<view class="details">實時計價是基於訂單服務內容（里程、時長、時段等）按以下費用項定價標准計算訂單價格的計價方式</view>
			</view>
			<view class="one-ruler">
				<view class="title">起步價</view>
				<view class="one-price">
					<view>默認起步價</view>
					<view class="price">{{rulerInfor.default_initate_price}}元</view>
				</view>
				<view class="one-price" v-for="(item,index) in rulerInfor.initiate_price" :key='index'>
					<view>{{item.start_time}} - {{item.end_time}}</view>
					<view class="price">{{item.price}}元</view>
				</view>
				<view class="one-price">
					<view>包含裡程</view>
					<view class="price">{{rulerInfor.initiate_km}}公里</view>
				</view>
				<view class="one-price">
					<view>包含時長</view>
					<view class="price">{{rulerInfor.initiate_duration}}分鐘</view>
				</view>
				<view class="details">
					包含裡程或包含時長（低速時長）任意一項超出時，將在起步價基礎上累計計費
				</view>
			</view>
			<view class="one-ruler">
				<view class="title">裡程費（分時段）</view>
				<view class="one-price" v-for="(item,index) in rulerInfor.mileage_price" :key='index'>
					<view>{{item.start_time}} - {{item.end_time}}</view>
					<view class="price">{{item.price}}元/公里</view>
				</view>
			</view>
			<view class="one-ruler">
				<view class="title">時長費（分時段）</view>
				<view class="one-price">
					<view>普通時段</view>
					<view class="price">{{rulerInfor.default_duration_price}}元/分鐘</view>
				</view>
				<view class="one-price" v-for="(item,index) in rulerInfor.duration_price" :key='index'>
					<view>{{item.start_time}} - {{item.end_time}}</view>
					<view class="price">{{item.price}}元/分鐘</view>
				</view>
			</view>
			<view class="one-ruler">
				<view class="title">遠途費</view>
				<view class="one-price">
					<view>超出距離里程</view>
					<view class="price">{{rulerInfor.out_km}}公里</view>
				</view>
				<view class="one-price" v-for="(item,index) in rulerInfor.out_range_price" :key='index'>
					<view>{{item.start_time}} - {{item.end_time}}超出{{item.out_km}}公里，加收遠途費</view>
					<view class="price">{{item.price}}元/公里</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="toBack">我知道了</view>
	</view>
</template>

<script>
	import { getPriceRuler } from '../../request/api.js'
	export default {
		data() {
			return {
				rulerInfor:""
			};
		},
		onShow(){
			this.getRule();
		},
		methods:{
			async getRule(){
				uni.showLoading({
					title:"加載中..."
				})
				let res=await getPriceRuler();
				uni.hideLoading();
				console.log(res);
				if(res.code==1){
					this.rulerInfor=res.data;
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			toBack(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#FAFAFA;
		.content{
			width:702rpx;margin-left:auto;box-sizing: border-box;
			margin-right:auto;padding:24rpx 0;
			.ruler-content{
				width:100%;background-color:#FFFFFF;
				border-radius: 20rpx;box-sizing: border-box;
				box-shadow: 0 2rpx 12rpx 0 rgba(204,204,204,0.3);
				padding:0 24rpx;
				.one-ruler{
					padding-top:24rpx;font-size:26rpx;
					color:#9E9E9E;line-height:37rpx;
					border-bottom:1px solid #F0F0F0;
					padding-bottom:1rpx;
					.title{
						font-size:30rpx;color:#040404;
						line-height:42rpx;margin-bottom:24rpx;
					}
					&:last-child{
						border-bottom: none;
					}
					.one-price{
						display: flex;align-items: center;
						justify-content:space-between;
						margin-bottom:24rpx;
						.price{
							color:#040404;
						}
					}
				}
				.details{
					padding-bottom:24rpx;
				}
			}
			.btn{
				width:650rpx;height:98rpx;
				background-color: #040404;
				border-radius: 98rpx;
				display: flex;align-items: center;
				justify-content: center;
				font-size: 36rpx;color:#ffffff;
				margin-top:90rpx;margin-left:auto;
				margin-right:auto;
			}
		}
	}
</style>
